<template>
	<view class="product-con ">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"  bgcolor="#FFF"></skeleton>
		
		<view class="skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:lower-threshold="100"  :style="'height:' + height + 'px;'"  @scroll="scroll">
				<productConSwiper class="skeleton-rect"  :imgUrls="lineInfo.sliderImageList" :videoline="lineInfo.videoLink">
				</productConSwiper>
			
				<view class="wrapper">
					<view class="display-flex share acea-row  row-bottom">
						<view class="display-flex display-flex-align-end skeleton-rect">
							<view class="money font-color">
								￥
								<text class="num" v-text="lineInfo.discountPrice || 0"></text>
								<text >起</text>	
							</view>
							<view class="slable" style="margin-left: 4px;">
								价格:￥<text style="text-decoration: line-through">{{lineInfo.price || 0}}</text>
							</view>
						</view>
						<view class="slable skeleton-rect" style="margin-left: auto;" v-text="'已售:' + (lineInfo.fsales || 0)"></view>
					</view>
					<view class="display-flex odcontent">
						<view class="mini-button u-skeleton-rect">
							{{lineInfo.origin}}
						</view>
						<view class="mini-button skeleton-rect">
							{{lineInfo.destination}}
						</view>
					</view>
			        <view class="introduce skeleton-rect" v-text="lineInfo.storeName?lineInfo.storeName:(lineInfo.origin+'-'+lineInfo.destination)"></view>
					<view class="display-flex tscontent skeleton-rect">
						<view class="display-flex display-flex-align-end tsmaian">
							<text class="iconfont icon-duigou tsicon"></text>
							<text class="tsctext">提前{{lineInfo.aheadRefundTime/60}}小时可退款</text>
						</view>
						<view class="display-flex display-flex-align-end tsmaian skeleton-rect">
							<text class="iconfont icon-duigou tsicon"></text>
							<text class="tsctext">提前{{lineInfo.checkTime}}分钟可检票</text>
						</view>
					</view>
				</view>
				
				
				<view  class="product-intro" >
					<view class="title">图文介绍</view> 
					<view class="conter">
						<jyf-parser :html="description" ref="article" :tag-style="tagStyle"></jyf-parser>
					</view>
				</view>
				
				<view class="footer acea-row row-between-wrapper">
						<!-- <button open-type="contact" hover-class='none' class='item'>
							<view class='iconfont icon-kefu'></view>
							<view>客服</view>
						</button> -->
					<navigator hover-class="none" class="item skeleton-rect" open-type="switchTab" url="/pages/index/index">
						<view class="iconfont icon-shouye1" ></view>
						<view class="p_center">首页</view>
					</navigator>
					<!-- #ifdef MP -->
					<button hover-class='none' class='item skeleton-rect' @click="kefuClick" v-if="chatConfig.telephone_service_switch === 'true'">
						<view class='iconfont icon-kefu'></view>
						<view>客服</view>
					</button>
					<button open-type="contact" hover-class='none' class='item skeleton-rect' v-else>
						<view class='iconfont icon-kefu'></view>
						<view>客服</view>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<view class="item skeleton-rect" @click="kefuClick">
						<view class="iconfont icon-kefu"></view>
						<view>客服</view>
					</view>
					<!-- #endif -->
					<view class="bnt acea-row skeleton-rect" >
						<view @click="listenerActionSheet" class="joinCart bnts"><button class="joinCart bnts"
							open-type="share" hover-class="none">
							<text style="font-size: 12px;margin-right: 4px;" class="iconfont icon-fenxiang"></text>
							分享</button>
						</view>
						<view @click="goDetail" class="buy bnts skeleton-rect">
							<button class="buy bnts" form-type="submit">
								立即购买
							</button>
						</view>
					</view>	
						
				</view>
			</scroll-view>	
			
		</view>
		
		<view @click="toTop" v-if="showArrowUp" class="acea-row row-center-wrapper cartf iconfont icon-zhixiangshang" :style="'top:'+(height-120)+'px'">
		</view>
	</view>
</template>

<script>
	import {
		getLineDetail,
	} from '@/api/bus.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import productConSwiper from '@/components/productConSwiper';
	
	export default {
		computed: {
		},
		components:{
			productConSwiper
		},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				chatConfig:{
					consumer_hotline:'',
					telephone_service_switch:'false'
				}, //客服配置
				marTop: 0,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				theme: getApp().globalData.theme,
				tagStyle: {
					img: 'width:100%;display:block;',
					table: 'width:100%',
					video: 'width:100%'
				},
				loading: true,
				line_id: '',
				lineInfo:{},
				description: '',
				routineContact: 0,
				scrollTop: 0,
				scrollY: 0,
				showArrowUp: false,
				height: 0
			}
		},
		
	
		onLoad(options) {
			
			let that = this;
			setTimeout(() => {
				this.isNodes++;
			}, 100);
			
			that.$set(that,'chatConfig',that.$Cache.getItem('chatConfig'));
			// #ifndef MP
			// #endif
			that.line_id = options.line_id;
			//扫码携带参数处理
			// #ifdef MP
			if (options.scene) {
				let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
				if (value.id) options.id = value.id;
				//记录推广人uid
				if (value.pid) app.globalData.spid = value.pid;
			}
			if (!options.line_id) {
				return that.$util.Tips({
					title: '缺少参数无法查看'
				}, {
					tab: 3,
					url: 1
				});
			} else {
				that.line_id = options.line_id;
			}
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
	 
				}
			});
			//记录推广人uid
			if (options.spid) app.globalData.spid = options.spid;
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
				 
				}
			});
			that.getLineDetail();
		
		},
		mounted() {

		},
		onShow() {
			
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
			return {
				title: that.storeInfo.storeName || '',
				imageUrl: that.storeInfo.image || '',
				path: '/pages/bus/line_detail?line_id=' + that.line_id + '&spid=' + that.uid
			};
		},
		// #endif
		methods: {
			listenerActionSheet(){
				this.appShare('WXSceneSession');
			},
			kefuClick() {
				if(this.chatConfig.telephone_service_switch === 'true'){
					uni.makePhoneCall({
					    phoneNumber: this.chatConfig.consumer_hotline //仅为示例
					});
				}else{
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/users/web_page/index?webUel=' + this.chatUrl + '&title=客服'
					})
					// #endif
					// #ifndef APP-PLUS
					location.href = this.chatUrl;
					// #endif
				}
			},
			
			// app分享
			// #ifdef APP-PLUS
			appShare(scene) {
				let that = this
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: `${HTTP_REQUEST_URL}${curRoute}&spread=${that.uid}`,
					title: that.storeInfo.storeName,
					summary: that.storeInfo.storeInfo,
					imageUrl: that.storeInfo.smallImage,
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
						that.posters = false;
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						that.posters = false;
					}
				});
			},
			// #endif
			goDetail(){
				if (this.isLogin === false) {
					toLogin();
				} else {
					uni.navigateTo({
						url: '/pages/bus/plan_detail/index?line_id=' + this.line_id
					});
				}
			},
			getLineDetail: function() {
				let that = this;
				getLineDetail({lineId:that.line_id})
					.then(res => {
						let lineInfo = res.data;
					
						that.$set(that, 'lineInfo', lineInfo);
						that.$set(that, 'description', lineInfo.description);
					
						that.description = that.description.replace(/<img/gi,
							'<img style="max-width:100%;height:auto;float:left;display:block" ');
						
						
						this.showSkeleton = false
					})
					.catch(err => {
						this.showSkeleton = false
						//状态异常返回上级页面
						return that.$util.Tips({
							title: err.toString()
						}, {
							tab: 3,
							url: 1
						});
					});
			},
			toTop: function(){
			    // TODO 坑  
				this.$set(this, 'scrollTop', this.scrollTop + 1);
			},
			scroll: function(e) {
				console.log(3333,332)
				
				var that = this,
					scrollY = e.detail.scrollTop;

				if(scrollY >= 1500){
					that.showArrowUp = true
				} else {
					that.showArrowUp = false
				}
			},
			setCollect: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					let that = this;
					let data = {
						line_id: this.line_id,
						c_type: 'collect',
						type: 1,
						city_id: this.lineInfo.city_id, 
					}
					if (this.lineInfo.userCollect) {
						data.opr = 0
						collectLine(data).then(res => {
							that.$set(that.lineInfo, 'userCollect', !that.lineInfo.userCollect);
							return that.$util.Tips({
								title: '取消收藏成功'
							}); 
						});
					} else {
						data.opr = 1
						collectLine(data).then(res => {
							that.$set(that.lineInfo, 'userCollect', !that.lineInfo.userCollect);
							return that.$util.Tips({
								title: '收藏成功'
							});
						});
					}
				}
			},
		}

	}
</script>

<style lang="scss" >
	page{
		background-color: #F7F7F7;
	}
   .product-con .product-intro{
		// margin: 0 8px;
		// border-radius: 8px;
		margin-top: 8px;
		width: auto;
		padding-bottom: 50px;
	}
   .product-con .footer {
		// padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.product-con .footer .item {
		font-size: 18rpx;
		color: #666;
		width: 60px;
		text-align: center;
	}

	.product-con .footer .item .iconfont {
		text-align: center;
		font-size: 40rpx;
	}

	.product-con .footer .item .iconfont.iconxihuan {
		color: #FC4141;
	}

	.product-con .footer .item .iconfont.icon-gouwuche1 {
		font-size: 40rpx;
		position: relative;
	}

	.product-con .footer .item .iconfont.icon-gouwuche1 .num {
		color: #fff;
		position: absolute;
		font-size: 18rpx;
		padding: 2rpx 10rpx 3rpx;
		border-radius: 200rpx;
		top: -10rpx;
		right: -10rpx;
	}

	
	.product-con .footer .bnt {
		width: 444rpx;
		height: 76rpx;
		margin-right: 10px;
	}
	
	.product-con .footer .bnt .bnts {
		width: 222rpx;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}
   .product-con .footer .bnt .joinCart {
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #272522 0%, #352e27 100%)
	}

	.product-con .footer .bnt .buy {
		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(to right, #e64141 0%, #e02312 100%);
	}	
	.product-con .wrapper {
		background-color: #fff;
		border-radius: 8px;
		margin-top: -10px;
		position: relative;
	}
	.odcontent {
		margin: 10px 12px 0 10px;
	}
	.pl-20{
		padding-left: 20rpx;
	}
	.slable {
		font-size: 12px;
		color: #82848f;
	}
	.tscontent{
		// margin: 8px 12px 10px 10px;
		padding-bottom: 10px;
	}
	.tsicon{
		color: #1fb504;
	}
	.tsctext{
		font-size: 12px;
		color: #8a8888;
		margin: 0 10px 0 5px;
	}
	.tsmaian{
		margin-left: 4px;
	}
</style>
